<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌管理</title>
    <link rel="stylesheet" href="../css/elementui.css">
</head>
<body>
<script src="../js/vue.js"></script>
<script src="../js/elementui.js"></script>
<script src="../js/axios.js"></script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<div id="app">

    <el-form :inline="true" >
        <el-form-item label="品牌名称">
            <el-input v-model="searchMap.name" placeholder="品牌名称"></el-input>
        </el-form-item>
        <el-form-item label="品牌首字母">
            <el-input v-model="searchMap.letter" placeholder="品牌首字母"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="fetchData">查询</el-button>
            <el-button type="primary" @click="visible2=true">新增</el-button>
        </el-form-item>
    </el-form>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="id"
                    label="id"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="letter"
                    label="首字母"
                    width="200">
            </el-table-column>
            <el-table-column
                    label="图片"
                    >
                <template slot-scope="scope">
                    <img width="150px" height="80px" :src="scope.row.image">
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="200">
                <template slot-scope="scope">
                    <el-button @click="update(scope.row.id)" type="text" size="small">修改</el-button>
                    <el-button @click="dele(scope.row.id)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

    <el-pagination
            @size-change="fetchData"
            @current-change="fetchData"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog
            title="品牌编辑"
            :visible.sync="visible2">

    <el-form label-width="80px">
        <el-form-item label="品牌名称">
            <el-input  placeholder="品牌名称" v-model="pojo.name"></el-input>
        </el-form-item>
        <el-form-item label="品牌首字母">
            <el-input placeholder="品牌首字母" v-model="pojo.letter"></el-input>
        </el-form-item>
        <el-form-item label="品牌图片">
            <el-upload
                    class="avatar-uploader"
                    action="/upload/native.do"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageURL" :src="imageURL" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="品牌排序">
            <el-input placeholder="品牌排序" v-model="pojo.seq"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="save()">保存</el-button>
            <el-button @click="formVisible = false">关闭</el-button>
        </el-form-item>
    </el-form>

    </el-dialog>

</div>

<script>
    new  Vue({
        el:"#app",
            data(){
            return{
                tableData:[],
                currentPage:1,
                total:10,
                size:10,
                searchMap:{},
                pojo:{},
                visible2:false,
                imageURL:''
            }

        },
        created(){
           this.fetchData()
        },
        methods:{
            fetchData(){
                axios.post(`/brand/findPage.do?page=${this.currentPage}&size=${this.size}`,this.searchMap).then(
                    response=>{
                        this.tableData=response.data.rows;
                        this.total = response.data.total;

                    }
                )
            },
            save(){
                this.pojo.image=this.imageURL;
                axios.post(`/brand/${this.pojo.id==null?'add':'update'}.do`,this.pojo).then(response=>{
                    this.fetchData();
                    this.visible2=false;
                })
            },
            dele(id){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    axios.get(`/brand/delete.do?id=${id}`).then(response=>{
                        this.$alert('删除成功', '提示');
                        this.fetchData();
                    })
                })
            },
            update(id){
                this.visible2=true
                axios.get(`/brand/findById.do?id=${id}`).then(response=>{
                    this.imageURL=this.pojo.image;
                    this.pojo=response.data;
                })
            },
            handleAvatarSuccess(res,file){
                this.imageURL=file.response;
            },
            beforeAvatarUpload(file){
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }

        }
    });
</script>
</body>
</html>